<%--
  Created by IntelliJ IDEA.
  User: ykq
  Date: 2024/3/15
  Time: 14:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录页面</title>
    <%--引入vue的js--%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%--引入element的js--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <%--引入elementui的样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-table
            :data="roles"
            border
            style="width: 100%">
        <el-table-column
                fixed
                prop="roleid"
                label="编号"
        >
        </el-table-column>
        <el-table-column
                fixed
                prop="rolename"
                label="角色名"
        >
        </el-table-column>
        <el-table-column
                fixed
                prop="remark"
                label="描述"
        >
        </el-table-column>
        <el-table-column
                fixed
                prop="status"
                label="状态"
        >
            <template slot-scope="scope">
                <el-switch
                        v-model="scope.row.status"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        :active-value="1+''"
                        :inactive-value="0+''"
                        @change="changestatus(scope.row)"
                >
                </el-switch>
            </template>
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
        >
            <template slot-scope="scope">
                <el-button type="primary" size="small">编辑</el-button>
                <el-button type="danger" size="small">删除</el-button>
                <el-button type="danger" size="small" @click="editQx(scope.row.roleid)">修改权限</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <%--修改权限弹出框--%>
    <el-dialog
            title="修改权限"
            :visible.sync="dialogVisible"
            width="30%"
    >
        <%--
           el-tree:树形组件
              data: 树形数据
              show-checkbox: 显示复选框
              node-key:每个树形的标志
              default-expanded-keys:默认展开的key
              default-checked-keys: 默认选中的
              props: 默认展示的树形
        --%>
        <el-tree
                :data="data"
                show-checkbox
                ref="tree"
                node-key="mid"
                :props="defaultProps">
        </el-tree>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmUpdate()">确 定</el-button>
          </span>
    </el-dialog>
</div>
</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            //表格数据
            roles: [],
            current: 1,
            pageSize: 5,
            total: 0,
            //控制修改权限的弹出框
            dialogVisible: false,
            //树形数据
            data: [],
            defaultProps: {
                children: 'children',
                label: 'mname'
            },
            //被选中的树形菜单
            checkKeys: [],
            //修改角色的id
            roleId: 0,
        },
        created() {
            this.loadRoleTable();
        },
        methods: {
            //确认修改权限
            confirmUpdate() {
                let arr1=this.$refs.tree.getCheckedKeys();//获取全选的树
                let arr2=this.$refs.tree.getHalfCheckedKeys();//获取全选的树
                let checkArr=arr1.concat(arr2);
                axios.get("/menu/confirmUpdate?roleId="+this.roleId+"&menuIds="+checkArr).then(result=>{
                      this.$message.success("修改权限成功");
                      this.dialogVisible=false;
                });
            },

            //修改权限
            editQx(roleid) {
                this.roleId = roleid;
                this.dialogVisible = true;
                axios.get("/menu/getByRoleId?roleId=" + roleid).then(result => {
                    //result:包含所有的菜单  以及当前角色具有的菜单id.
                    this.data = result.data.data.menus;
                    this.checkKeys = result.data.data.menuIds;
                    setTimeout(()=>{
                        this.checkKeys.forEach(value=>{
                             this.$refs.tree.setChecked(value,true,false);
                        })
                    },200)
                })
            },

            changestatus(row) {
                axios.get("/role/updateStatus?id=" + row.roleid + "&status=" + row.status).then(result => {
                    if (result.data.code === 200) {
                        this.$message.success(result.data.msg);
                    } else {
                        this.$message.error(result.data.msg);
                    }
                })
            },
            loadRoleTable() {
                axios.get("/role/list/" + this.current + "/" + this.pageSize).then(result => {
                    this.roles = result.data.data.list;
                    this.total = result.data.data.total;
                })
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadRoleTable();
            },
            handleCurrentChange(val) {
                this.current = val;
                this.loadRoleTable();
            },
        }
    })
</script>

</html>
